<template>
  <el-row :gutter="16">
    <el-col :span="16">
      <el-row :gutter="16">
        <el-col :span="6">
          <ele-card>
            <template #header>
              <span class="card-span">毕业年份</span>
              <el-tag type="info" style="float: right; padding:0 5px;" size="small">年</el-tag>
            </template>
            <div class="mini-card-word">
              {{ currentYear }}
            </div>
          </ele-card>
        </el-col>
        <el-col :span="6">
          <ele-card>
            <template #header>
              <span class="card-span">就业率</span>
              <el-tag type="success" style="float: right; padding: 0 5px;" size="small">率</el-tag>
            </template>
            <div class="mini-card-word">
              {{ currentEmploymentRate }}
            </div>
          </ele-card>
        </el-col>
        <el-col :span="6">
          <ele-card>
            <template #header>
              <span class="card-span">签约率</span>
              <el-tag style="float: right; padding: 0 5px;" size="small">率</el-tag>
            </template>
            <div class="mini-card-word">
              {{ currentSigningRate }}
            </div>
          </ele-card>
        </el-col>
        <el-col :span="6">
          <ele-card>
            <template #header>
              <span class="card-span">全国系统人数</span>
              <el-tag type="danger" style="float: right; padding: 0 5px;" size="small">人</el-tag>
            </template>
            <div class="mini-card-word">
              {{ nationwideSystemCount }}
            </div>
          </ele-card>
        </el-col>
      </el-row>
      <el-row>
        <ele-card style="width: 100%;">
          <template #header>
            <span>快捷操作</span>
          </template>
          <el-row :gutter="20">
            <el-col :span="3">
              <div class="quick-item">
                <router-link :to="'/admin/recommend/student/list'" class="quick-link">
                  <div class="quick-img">
                    <img src="@/assets/quit/recommend.png" alt="推荐表管理" width="42">
                  </div>
                  <div class="quick-text">
                    推荐表管理
                  </div>
                </router-link>
              </div>
            </el-col>
            <el-col :span="3">
              <div class="quick-item">
                <router-link :to="'statistic/statisticFileInfo'" class="quick-link">
                  <div class="quick-img">
                    <img src="@/assets/quit/statistic.png" alt="就业统计" width="42">
                  </div>
                  <div class="quick-text">
                    就业统计
                  </div>
                </router-link>

              </div>
            </el-col>
            <el-col :span="3">
              <div class="quick-item">
                <div class="quick-img">
                  <img src="@/assets/quit/report.png" alt="报表中心" width="42">
                </div>
                <div class="quick-text">
                  报表中心
                </div>
              </div>
            </el-col>
            <el-col :span="3">
              <div class="quick-item">
                <router-link :to="'/member/student'" class="quick-link">
                  <div class="quick-img">
                    <img src="@/assets/quit/student.png" alt="学生管理" width="42">
                  </div>
                  <div class="quick-text">
                    学生管理
                  </div>
                </router-link>
              </div>
            </el-col>
            <el-col :span="3">
              <div class="quick-item">
                <router-link :to="'/member/user'" class="quick-link">
                  <div class="quick-img">
                    <img src="@/assets/quit/teacher.png" alt="老师管理" width="42">
                  </div>
                  <div class="quick-text">
                    老师管理
                  </div>
                </router-link>
              </div>
            </el-col>
            <el-col :span="3">
              <div class="quick-item">
                <router-link :to="'/system/config'" class="quick-link">
                  <div class="quick-img">
                    <img src="@/assets/quit/param.png" alt="参数设置" width="42">
                  </div>
                  <div class="quick-text">
                    参数设置
                  </div>
                </router-link>
              </div>
            </el-col>
            <el-col :span="3">
              <div class="quick-item">
                <router-link :to="'/system/dict'" class="quick-link">
                  <div class="quick-img">
                    <img src="@/assets/quit/dict.png" alt="字典管理" width="42">
                  </div>
                  <div class="quick-text">
                    字典管理
                  </div>
                </router-link>
              </div>
            </el-col>
            <el-col :span="3">
              <div class="quick-item">
                <router-link :to="'/system/log/operlog'" class="quick-link">
                  <div class="quick-img">
                    <img src="@/assets/quit/operation.png" alt="字典管理" width="42">
                  </div>
                  <div class="quick-text">
                    操作日志
                  </div>
                </router-link>
              </div>
            </el-col>
          </el-row>
        </ele-card>
      </el-row>
      <el-row>
        <ele-card style="width: 100%;" class="card-wrapper">
          <template #header>
            <span>近7日签约率、就业率变化趋势</span>
          </template>
          <v-chart style="height: 346px;" autoresize :option="employmentRateOption"></v-chart>
        </ele-card>
      </el-row>
    </el-col>
    <el-col :span="8">
      <ele-card class="card-wrapper">
        <template #header>
          <span>推荐表填写进度</span>
        </template>
        <v-chart style="height: 700px;" autoresize :option="studentRecommendCompletionStatusOption"/>
      </ele-card>
    </el-col>
  </el-row>
</template>

<script setup>
import {reactive, ref} from 'vue';
import {adminIndexInit} from "@/api/index.js";
import VChart from 'vue-echarts';
import {use} from 'echarts/core';
import {CanvasRenderer} from 'echarts/renderers';
import {BarChart, LineChart} from 'echarts/charts';
import {GridComponent, LegendComponent, ToolboxComponent, TooltipComponent,} from 'echarts/components';
// 按需加载echarts
use([CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent, ToolboxComponent, LineChart]);

const props = defineProps({
  /** 修改回显的数据 */
  roleKey: String
});

const currentYear = ref(null);
const currentEmploymentRate = ref(null);
const currentSigningRate = ref(null);
const nationwideSystemCount = ref(null);
const studentRecommendCompletionStatusOption = reactive({});

const studentRecommendCompletionStatusData = reactive({
  department: [],
  completed: [],
  unfinished: []
});


if (props.roleKey === "admin" || props.roleKey === "regularAdmin") {
  adminIndexInit().then(res => {
    console.log(res.data);
    currentYear.value = res.data.currentYear;
    currentEmploymentRate.value = res.data.currentEmploymentRate;
    currentSigningRate.value = res.data.currentSigningRate;
    nationwideSystemCount.value = res.data.nationwideSystemCount;
    if (res.data.studentRecommendCompletionStatusList) {
      for (let item of res.data.studentRecommendCompletionStatusList) {
        studentRecommendCompletionStatusData.department.push(item.department);
        studentRecommendCompletionStatusData.completed.push(item.completed);
        studentRecommendCompletionStatusData.unfinished.push(item.unfinished);
      }
      setStudentRecommendCompletionStatusOption(studentRecommendCompletionStatusData.department, studentRecommendCompletionStatusData.completed, studentRecommendCompletionStatusData.unfinished);
    }
    if (res.data.recent10DaysRate) {
      employmentRateOptionData.legend = res.data.recent10DaysRate.legend;
      employmentRateOptionData.xaxis_data = res.data.recent10DaysRate.xaxis_data;
      employmentRateOptionData.signingRateList = res.data.recent10DaysRate.signingRateList;
      employmentRateOptionData.employmentRateList = res.data.recent10DaysRate.employmentRateList;
    }
    setEmploymentRateOption(employmentRateOptionData);
  });
}

const setStudentRecommendCompletionStatusOption = (departmentList, completedList, unfinishedList) => {
  Object.assign(studentRecommendCompletionStatusOption, {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    legend: {},
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: departmentList.reverse(),
      axisLabel: {
        margin: 5,// 清除默认间距
      }
    },
    grid: {
      containLabel: true //确保各系label显示正常
    },
    series: [
      {
        name: '已完成',
        type: 'bar',
        stack: 'total',
        label: {
          show: true,
          color: '#fff', // 设置文字颜色为白色
          fontWeight: 'bold' // 设置文字为粗体
        },
        emphasis: {
          focus: 'series'
        },
        data: completedList.reverse(),
        itemStyle: {
          color: '#5abae0',
        },
      },
      {
        name: '未完成',
        type: 'bar',
        stack: 'total',
        label: {
          show: true,
          color: '#909399', // 设置文字颜色为白色
          fontWeight: 'bold' // 设置文字为粗体
        },
        emphasis: {
          focus: 'series'
        },
        data: unfinishedList.reverse(),
        itemStyle: {
          color: '#F2F6FC',
        }
      },
    ]
  });
}


const employmentRateOption = reactive({});

const employmentRateOptionData = reactive({
  legend: [],
  xaxis_data: [],
  signingRateList: [],
  employmentRateList: []
});

const setEmploymentRateOption = (employmentRateOptionData) => {
  Object.assign(employmentRateOption, {
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        let html = params[0].name + "<br>";
        for (let i = 0; i < params.length; i++) {
          html += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + params[i].color + ';"></span>';
          html += params[i].seriesName + ":&nbsp;&nbsp;" + params[i].value + "%<br>";
        }
        return html;
      }
    },
    legend: {
      data: employmentRateOptionData.legend
    },
    grid: {
      left: '2%',
      right: '2%',
      bottom: '1%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: employmentRateOptionData.xaxis_data
    },
    yAxis: {
      axisLabel: {
        formatter: '{value}%'
      }
    },
    series: [
      {
        name: '签约率',
        type: 'line',
        stack: 'Total',
        label: {
          show: true,
          position: 'top',
          formatter: '{c}%'
        },
        data: employmentRateOptionData.signingRateList,
        itemStyle: {
          color: '#52c41a',
        }
      }, {
        name: '就业率',
        type: 'line',
        stack: 'Total',
        label: {
          show: true,
          position: 'top',
          formatter: '{c}%'
        },
        data: employmentRateOptionData.employmentRateList,
        itemStyle: {
          color: '#5abae0',
        }
      }
    ]
  });
}


</script>

<style scoped>
.quick-item {
  cursor: pointer;

  .quick-img {
    padding-top: 10px;
    text-align: center;
    height: 52px;
    object-fit: contain;
  }

  .quick-text {
    text-align: center;
    font-weight: bold;
  }

  padding-bottom: 20px;
}

@keyframes flipHorizontal {
  0% {
    transform: scaleX(1); /* 初始状态，不翻转 */
  }
  50% {
    transform: scaleX(-1); /* 中间状态，开始翻转 */
  }
  100% {
    transform: scaleX(1); /* 结束状态，再次回到不翻转 */
  }
}

.quick-link {
  color: inherit;
  text-decoration: none;
  user-select: none;
}

.quick-item:hover {
  .quick-img img {
    animation: flipHorizontal 1s; /* 应用动画，持续2秒，无限循环 */
  }


  .quick-text {
    color: #909399;
  }
}


.card-span {
  color: #5abae0;
}

.mini-card-word {
  font-size: 20px;
  font-weight: bold;
}
</style>
